<template>
    <div>
        <!-- 二级导航 -->
        <div class="ui attached pointing menu">
            <div class="ui container" style="padding:0em 2em !important">
                <div class="right menu">
                    <router-link class="item" to="/admin/add">
                        <a>发布</a>
                    </router-link>
                    <router-link class="teal active item" to="/admin/index">
                        <a>管理</a>
                    </router-link>
                </div>
            </div>
        </div>
        <!-- 中间部分 -->
        <div class="ui container m-padding-tb-big" style="padding:1em 2em !important;" id="app">
            <form action="#" class="ui form segment" method="POST">
                <div class="ui grid">
                    <div class="ui five wide column">
                        <input type="text" name="title" placeholder="标题" v-model="title">
                    </div>
                    <div class="ui five wide column">
                        <div class="ui selection fluid dropdown">
                            <input type="hidden" name="types">
                            <i class="icon dropdown"></i>
                            <div class="default text">类别</div>
                            <div class="menu">
                                <div class="item" data-value="1">Spring boot</div>
                                <div class="item" data-value="2">Netty</div>
                                <div class="item" data-value="3">Spring</div>
                                <div class="item" data-value="4">Django</div>
                                <div class="item" data-value="5">Java学习</div>
                            </div>
                        </div>
                    </div>
                    <div class="ui two wide column">
                        <div class="ui mini basic toggle button" style="width: 100% !important;">
                            <div class="ui teal checkbox">
                                <input type="checkbox" name="recommend" id="recommend">
                                <label for="recommend">推荐</label>
                            </div>
                        </div>
                    </div>
                    <div class="ui two wide column">
                        <button class="ui teal basic left button"><i class="icon teal basic search"></i>搜索</button>
                    </div>
                    <div class="ui two wide column">
                        <button class="ui teal basic left button" @click="add('')"><i class="icon teal basic file outline"></i>新增</button>
                    </div>
                </div>

            </form>

            <table class="ui striped table segment center aligned">
                <thead>
                <tr>
                    <th></th>
                    <th>标题</th>
                    <th>类型</th>
                    <th>更新时间</th>
                    <th>阅读量</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item, id) in tableContent" v-bind:key="item.id">
                    <td>{{ id + 1 }}</td>
                    <td>{{ item.title }}</td>
                    <td>{{ item.type[0] }}</td>
                    <td>{{ item.updateTime | datetimeFormat}}</td>
                    <td>{{ item.views }}</td>
                    <td>
                        <a href="#" class="ui mini teal basic button" @click="add(item.title)">编辑</a>
                        <a href="#" class="ui mini red basic button" @click.prevent="del(id)">删除</a>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <th><a href="#" class="ui mini teal basic button">上一页</a></th>
                    <th colspan="4">
                        <div class="ui mini pagination menu">
                            <a href="#" class="active item">1</a>
                            <a href="#" class="item">2</a>
                            <a href="#" class="item">3</a>
                            <a href="#" class="item">4</a>
                            <a href="#" class="item">5</a>
                        </div>
                    </th>
                    <th><a href="#" class="ui mini teal basic button">下一页</a></th>
                </tr>
                </tfoot>
            </table>

        </div>
    </div>

</template>

<script>
    export default {
        name: "adminIndex",
        data() {
            return {
                title: '',
                tpys: '',
                content: '',
                tableContent: [
                    {
                        id: 1,
                        title: "SpringBoot日志处理之Logback",
                        type: ["Spring Boot",],
                        updateTime: '2019-1-18',
                        views: '999+',
                    },
                    {
                        id: 2,
                        title: "SpringBoot基本配置详解",
                        type: ["Spring Boot",],
                        updateTime: '2019-5-16',
                        views: '999+',
                    },
                    {
                        id: 3,
                        title: "实现分布式服务注册及简易的 Netty 聊天",
                        type: ["Netty",],
                        updateTime: '2019-8-13',
                        views: '999+',
                    },{
                        id: 4,
                        title: "Spring 体系常用项目一览",
                        type: ["Spring",],
                        updateTime: '2019-11-5',
                        views: '999+',
                    },{
                        id: 5,
                        title: "Django中关于Cookie的使用示例",
                        type: ["Django",],
                        updateTime: '2019-6-25',
                        views: '999+',
                    },
                ]
            }
        },
        filters: {
            // 文章日期 格式过滤器函数
            datetimeFormat(input) {
                let datetime = new Date(input);
                let y = datetime.getFullYear();
                let m = datetime.getMonth() + 1;
                let d = datetime.getDate().toString();
                return `${y}-${m}-${d}`;
            }
        },
        methods: {
            del(id) {
                this.tableContent.splice(id, 1);
            },
            add(title) {
                if (title === "") {
                    window.location.href = 'add.html';
                } else {
                    window.location.href = 'add.html?' + title;
                }
            }
        },
        mounted() {
            // 控制类别下拉菜单
            $(this.$el).find('.ui.dropdown').dropdown({
                on: 'hover'
            })

            // checkbox事件
            $(this.$el).find('.ui.checkbox').checkbox()
        }
    }
</script>

<style scoped>

</style>
